<template>
    <div>
        <div class="back">
        <div class="geren" v-for="(item,i) in pinglun" :key="i">
           <div class="pinglun" >
             <div class="touxiang">
                 <img :src="`/img/${pinglun[i].aid}.jpeg`">
             </div>
             <div class="name">
               {{pinglun[i].username}}
             </div>
             <div class="hua">
                 <p>{{pinglun[i].comment}}</p>
             </div>
           </div>
        </div>
        </div>
    </div>
</template>
<script>
export default ({
    data() {
        return{
           pinglun:[],
        }
    },
    mounted() {
    this.axios.get(`/comment`).then((result) => {
    //   console.log(result)
      this.pinglun=result.data.results;
    //   console.log(this.pinglun)
    });
  },
})
</script>
<style scoped>
.back{
    background-color: rgb(127, 174, 236);
}
.geren{
  height: 180px;
  margin-top: 20px;
  position: relative;
  border-style: 0 0 solid 0 black;
}
.pinglun{
    width: 375px;
    height: 180px;
    background-color: rgb(137, 177, 241);
    position: absolute;
}
.touxiang img{
    width: 50px;
    height: 50px;
    position: absolute;
    left: 10px;
    top: 10px;
    border-radius: 50%;
    border:solid wheat 2px;
}
.name{
    width: 100px;
    height: 40px;
    position: absolute;
    left: 70px;
    top: 40px;
}
.hua{
    width: 300px;
    height: 100px;
    position: absolute;
    top: 70px;
    left: 40px;
    border: 3px groove rgb(199, 188, 188);

}
.hua p{
    font-size: 14px;
    color: black;
    font-weight: 400px;
}
</style>
